import React, { Component } from 'react';
import { meshLog, SPRemove, SPGet, SPSet } from '../../../../config';
import './create.less';
import { insertGameInfo } from '../../../../api/index.js';

export default class Ad extends Component {
  state = {
    imageName: '',
    selectedFile: null,
  };

  handleImageChange = (e) => {
    this.setState({ selectedFile: e.target.files[0] });
  };

  uploadImage = () => {
    const { selectedFile } = this.state;
    if (!selectedFile) return alert('请选择图片');

    const formData = new FormData();
    formData.append('file', selectedFile);

    fetch('/upload_game_image', {
      method: 'POST',
      body: formData,
    })
      .then(res => res.json())
      .then(data => {
        meshLog('data', data);
        if (data.code === 0) {
          // this.setState({ imageName: data.fileName });
          alert('上传成功');
        } else {
          alert('上传失败');
        }
      });
  };

  handleSubmit = async (e) => {
    e.preventDefault();
    const { imageName } = this.state;
    const formData = new FormData(e.target);
    formData.append('imageName', imageName);
    // 获取表单中的字段值
    const title = formData.get('title');
    const titleEnglish = formData.get('titleEnglish');
    const game_line = formData.get('course');
    const status = 0
    const img = '/images/game/list/' + this.state.selectedFile.name
    const time11 = formData.get('startTime');
    const time12 = formData.get('endTime');
    const time2 = formData.get('drawTime');
    const time3 = formData.get('ALLendTime');
    const time41 = formData.get('gameStart');
    const time42 = formData.get('gameEnd');

    // 打印到控制台
    console.log('比赛标题:', title);
    console.log('图片名称:', img);

    let result = await insertGameInfo(game_line, status, img, time11, time12, time2, time3, time41, time42)
    meshLog('result', result);

    if (result.code === 0) {
      alert("提交成功")
    } else {
      alert("提交失败")
    }


  };

  render() {
    const { imageName } = this.state;

    return (
      <div className="create">
        <div className="createdaohang">
          <span className="createdaohangzuo">位置：智慧夜跑 》线上赛事》创建活动</span>
        </div>

        <div className="createneirong">
          <div className="create-form-wrapper">
            <form onSubmit={this.handleSubmit} className="create-form">
              <div className="form-row">
                <div className="form-group">
                  <label>赛事图片：</label>
                  <input type="file" accept="image/*" onChange={this.handleImageChange} />
                  <button type="button" onClick={this.uploadImage}>上传</button>
                </div>
                <div className="form-group">
                  <label>赛事中文标题：</label>
                  <input type="text" name="title" required />
                </div>
                <div className="form-group">
                  <label>赛事英文标题：</label>
                  <input type="text" name="titleEnglish" required />
                </div>
                <div className="form-group">
                  <label>赛事赛程：</label>
                  <input type="text" name="course" required />
                </div>
                <div className="form-group">
                  <label>报名开始时间：</label>
                  <input type="datetime-local" name="startTime" required />
                </div>
                <div className="form-group">
                  <label>报名结束时间：</label>
                  <input type="datetime-local" name="endTime" required />
                </div>
                <div className="form-group">
                  <label>抽签时间：</label>
                  <input type="datetime-local" name="drawTime" required />
                </div>
                <div className="form-group">
                  <label>最终报名截止时间：</label>
                  <input type="datetime-local" name="ALLendTime" required />
                </div><div className="form-group">
                  <label>比赛开始时间：</label>
                  <input type="datetime-local" name="gameStart" required />
                </div>
                <div className="form-group">
                  <label>比赛结束时间：</label>
                  <input type="datetime-local" name="gameEnd" required />
                </div>
                <input type="hidden" name="imageName" value={imageName} />
              </div>
              <div className="form-submit-row">
                <button type="submit">提交</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    );
  }
}
